<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
    <!-- 文档公共样式 及组件特有示例样式-->
    <link rel="stylesheet" href="../../docs.css" />
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
    <!--
        TDesign 图标库，桌面端与移动端用同样的资源
        使用方式：<i class="t-icon t-icon-delete"></i>
      -->
    <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">

</head>
<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Calendar 日历</h1>
      <p class="tdesign-demo-wrap__info">开发者：yorickili</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-10-25</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign Calendar 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->

    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">通用日历面板</h2>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
          <div class="tdesign-demo-block">
            <div class="t-calendar t-calendar--full">
              <div class="t-calendar__control">
                <div class="t-calendar__control-section">
                  <div class="t-calendar__control-section-cell">
                    <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                  </div>
                  <div class="t-calendar__control-section-cell">
                    <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                  </div>
                </div>
                <div class="t-calendar__control-section">
                  <div class="t-calendar__control-section-cell">
                    <div style="width: 60px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                  </div>
                  <div class="t-calendar__control-section-cell">
                    <div style="width: 30px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                  </div>
                </div>
              </div>
              <div class="t-calendar__panel">
                <table class="t-calendar__table">
                  <thead class="t-calendar__table-head">
                    <tr class="t-calendar__table-head-row">
                      <th class="t-calendar__table-head-cell">一</th>
                      <th class="t-calendar__table-head-cell">二</th>
                      <th class="t-calendar__table-head-cell">三</th>
                      <th class="t-calendar__table-head-cell">四</th>
                      <th class="t-calendar__table-head-cell">五</th>
                      <th class="t-calendar__table-head-cell">六</th>
                      <th class="t-calendar__table-head-cell">日</th>
                    </tr>
                  </thead>
                  <tbody class="t-calendar__table-body">
                    <tr class="t-calendar__table-body-row">
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">27</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">28</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">29</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">30</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">31</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">01</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">02</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                    </tr>
                    <tr class="t-calendar__table-body-row">
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">03</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">04</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">05</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">06</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">07</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">08</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">09</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                    </tr>
                    <tr class="t-calendar__table-body-row">
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">10</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">11</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">12</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-checked">
                        <div class="t-calendar__table-body-cell-value">13</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">14</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">15</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">16</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                    </tr>
                    <tr class="t-calendar__table-body-row">
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">17</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">18</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">19</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">20</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">21</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">22</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">23</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                    </tr>
                    <tr class="t-calendar__table-body-row">
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">24</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">25</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">26</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">27</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">28</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">29</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">30</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                    </tr>
                    <tr class="t-calendar__table-body-row">
                      <td class="t-calendar__table-body-cell">
                        <div class="t-calendar__table-body-cell-value">31</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">01</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">02</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">03</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">04</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">05</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                      <td class="t-calendar__table-body-cell t-is-disabled">
                        <div class="t-calendar__table-body-cell-value">06</div>
                        <div class="t-calendar__table-body-cell-content"></div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="t-calendar__footer">
                1024
              </div>
            </div>
          </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">卡片模式日历</h2>

      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->

        <div class="tdesign-demo-block">
          <div class="t-calendar t-calendar--card">
            <div class="t-calendar__control">
              <div class="t-calendar__control-section">
                <div class="t-calendar__control-section-cell">
                  <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                </div>
                <div class="t-calendar__control-section-cell">
                  <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                </div>
              </div>
              <div class="t-calendar__control-section">
                <div class="t-calendar__control-section-cell">
                  <div style="width: 60px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                </div>
                <div class="t-calendar__control-section-cell">
                  <div style="width: 30px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
                </div>
              </div>
            </div>
            <div class="t-calendar__panel">
              <table class="t-calendar__table">
                <thead class="t-calendar__table-head">
                  <tr class="t-calendar__table-head-row">
                    <th class="t-calendar__table-head-cell">一</th>
                    <th class="t-calendar__table-head-cell">二</th>
                    <th class="t-calendar__table-head-cell">三</th>
                    <th class="t-calendar__table-head-cell">四</th>
                    <th class="t-calendar__table-head-cell">五</th>
                    <th class="t-calendar__table-head-cell">六</th>
                    <th class="t-calendar__table-head-cell">日</th>
                  </tr>
                </thead>
                <tbody class="t-calendar__table-body">
                  <tr class="t-calendar__table-body-row">
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">27</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">28</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">29</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">30</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">31</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">01</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">02</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                  </tr>
                  <tr class="t-calendar__table-body-row">
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">03</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">04</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">05</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">06</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">07</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">08</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">09</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                  </tr>
                  <tr class="t-calendar__table-body-row">
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">10</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">11</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">12</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-checked">
                      <div class="t-calendar__table-body-cell-value">13</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">14</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">15</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">16</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                  </tr>
                  <tr class="t-calendar__table-body-row">
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">17</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">18</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">19</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">20</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">21</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">22</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">23</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                  </tr>
                  <tr class="t-calendar__table-body-row">
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">24</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">25</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">26</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">27</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">28</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">29</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">30</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                  </tr>
                  <tr class="t-calendar__table-body-row">
                    <td class="t-calendar__table-body-cell">
                      <div class="t-calendar__table-body-cell-value">31</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">01</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">02</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">03</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">04</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">05</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                    <td class="t-calendar__table-body-cell t-is-disabled">
                      <div class="t-calendar__table-body-cell-value">06</div>
                      <div class="t-calendar__table-body-cell-content"></div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="t-calendar__footer">
              1024
            </div>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>
    </div>

    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">自然月状态</h2>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="t-calendar t-calendar--full">
          <div class="t-calendar__control">
            <div class="t-calendar__control-section">
              <div class="t-calendar__control-section-cell">
                <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
              <div class="t-calendar__control-section-cell">
                <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
            </div>
            <div class="t-calendar__control-section">
              <div class="t-calendar__control-section-cell">
                <div style="width: 60px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
              <div class="t-calendar__control-section-cell">
                <div style="width: 30px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
            </div>
          </div>
          <div class="t-calendar__panel">
            <table class="t-calendar__table">
              <tbody class="t-calendar__table-body">
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">一月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">二月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">三月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">四月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">五月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">六月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-checked">
                    <div class="t-calendar__table-body-cell-value">七月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">八月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">九月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">十月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">十一月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">十二月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">自然月状态/卡片模式</h2>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="t-calendar t-calendar--card">
          <div class="t-calendar__control">
            <div class="t-calendar__control-section">
              <div class="t-calendar__control-section-cell">
                <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
              <div class="t-calendar__control-section-cell">
                <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
            </div>
            <div class="t-calendar__control-section">
              <div class="t-calendar__control-section-cell">
                <div style="width: 60px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
              <div class="t-calendar__control-section-cell">
                <div style="width: 30px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
            </div>
          </div>
          <div class="t-calendar__panel">
            <table class="t-calendar__table">
              <tbody class="t-calendar__table-body">
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">1月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">2月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">3月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">4月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">5月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">6月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell t-is-checked">
                    <div class="t-calendar__table-body-cell-value">7月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">8月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">9月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">10月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">11月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell  t-is-checked">
                    <div class="t-calendar__table-body-cell-value">12月</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">翻阅模式</h2>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="t-calendar t-calendar--full t-calendar--through">
          <div class="t-calendar__control">
            <div class="t-calendar__control-section">
              <div class="t-calendar__control-section-cell">
                <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
              <div class="t-calendar__control-section-cell">
                <div style="width: 50px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
            </div>
            <div class="t-calendar__control-section">
              <div class="t-calendar__control-section-cell">
                <div style="width: 60px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
              <div class="t-calendar__control-section-cell">
                <div style="width: 30px; height: 24px; background-image: url(http://ue.qzone.qq.com/32);"></div>
              </div>
            </div>
          </div>
          <div class="t-calendar__panel">
            <div class="t-calendar__panel-title">
              2020年11月
            </div>
            <table class="t-calendar__table">
              <thead class="t-calendar__table-head">
                <tr class="t-calendar__table-head-row">
                  <th class="t-calendar__table-head-cell">一</th>
                  <th class="t-calendar__table-head-cell">二</th>
                  <th class="t-calendar__table-head-cell">三</th>
                  <th class="t-calendar__table-head-cell">四</th>
                  <th class="t-calendar__table-head-cell">五</th>
                  <th class="t-calendar__table-head-cell">六</th>
                  <th class="t-calendar__table-head-cell">日</th>
                </tr>
              </thead>
              <tbody class="t-calendar__table-body">
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">27</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">28</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">29</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">30</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">31</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">01</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">02</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">03</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">04</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">05</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">06</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">07</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">08</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">09</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">10</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">11</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">12</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-checked">
                    <div class="t-calendar__table-body-cell-value">13</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">14</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">15</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">16</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">17</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">18</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">19</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">20</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">21</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">22</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">23</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">24</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">25</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">26</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">27</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">28</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">29</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">30</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">31</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">01</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">02</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">03</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">04</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">05</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">06</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="t-calendar__panel">
            <div class="t-calendar__panel-title">
              2020年12月
            </div>
            <table class="t-calendar__table">
              <thead class="t-calendar__table-head">
                <tr class="t-calendar__table-head-row">
                  <th class="t-calendar__table-head-cell">一</th>
                  <th class="t-calendar__table-head-cell">二</th>
                  <th class="t-calendar__table-head-cell">三</th>
                  <th class="t-calendar__table-head-cell">四</th>
                  <th class="t-calendar__table-head-cell">五</th>
                  <th class="t-calendar__table-head-cell">六</th>
                  <th class="t-calendar__table-head-cell">日</th>
                </tr>
              </thead>
              <tbody class="t-calendar__table-body">
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">27</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">28</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">29</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">30</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">31</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">01</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">02</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">03</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">04</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">05</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">06</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">07</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">08</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">09</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">10</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">11</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">12</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-checked">
                    <div class="t-calendar__table-body-cell-value">13</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">14</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">15</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">16</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">17</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">18</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">19</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">20</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">21</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">22</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">23</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">24</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">25</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">26</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">27</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">28</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">29</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">30</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">31</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">01</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">02</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">03</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">04</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">05</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">06</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="t-calendar__panel">
            <div class="t-calendar__panel-title">
              2021年1月
            </div>
            <table class="t-calendar__table">
              <thead class="t-calendar__table-head">
                <tr class="t-calendar__table-head-row">
                  <th class="t-calendar__table-head-cell">一</th>
                  <th class="t-calendar__table-head-cell">二</th>
                  <th class="t-calendar__table-head-cell">三</th>
                  <th class="t-calendar__table-head-cell">四</th>
                  <th class="t-calendar__table-head-cell">五</th>
                  <th class="t-calendar__table-head-cell">六</th>
                  <th class="t-calendar__table-head-cell">日</th>
                </tr>
              </thead>
              <tbody class="t-calendar__table-body">
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">27</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">28</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">29</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">30</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">31</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">01</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">02</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">03</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">04</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">05</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">06</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">07</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">08</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">09</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">10</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">11</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">12</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-checked">
                    <div class="t-calendar__table-body-cell-value">13</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">14</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">15</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">16</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">17</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">18</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">19</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">20</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">21</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">22</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">23</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">24</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">25</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">26</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">27</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">28</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">29</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">30</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
                <tr class="t-calendar__table-body-row">
                  <td class="t-calendar__table-body-cell">
                    <div class="t-calendar__table-body-cell-value">31</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">01</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">02</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">03</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">04</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">05</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                  <td class="t-calendar__table-body-cell t-is-disabled">
                    <div class="t-calendar__table-body-cell-value">06</div>
                    <div class="t-calendar__table-body-cell-content"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

  </div>

</body>
</html>